<?php use_stylesheet('contacts.css') //load css of contacts page  ?>
<?php use_stylesheet('hoverTables.css') //load css of the tables   ?>
<div id="par_header"><!-- the top area with buttons and search -->
    <div id="bt_area"><!-- the top area with buttons -->
        <div class="button"><!-- add new contact button -->
            <a href="<?php echo url_for('sales_new_contact') ?>">
                <img src="<?php echo image_path('Buttons/bt_add_contact.png') ?>" onmouseover="this.src='<?php echo image_path('Buttons/bt_add_contact_hov.png') ?>';" onmouseout="this.src='<?php echo image_path('Buttons/bt_add_contact.png') ?>';" title="Add new contact"/>
            </a>
        </div>
    </div><!-- close button area -->
    <div id="search"><!-- search for contact -->
    <?php echo form_tag('sales_filter_contacts') ?>
        <fieldset>
            <legend class="bold">Search Contact</legend>
            <table>
                <tr>
                    <td>Code</td>
                    <td class="input_small"><?php echo $filter['contact_code']->render() ?></td><!-- renders input field for contact_code, small with for input -->
                </tr>
                <tr>
                    <td>Name</td>
                    <td class="input_normal"><?php echo $filter['name']->render() ?></td><!-- renders input field for name, normal width for input -->
                </tr>
                <tr>
                    <td>Category</td>
                    <td><?php echo $filter['category_name']->render() ?></td><!-- renders the categories in a dropdown -->
                </tr>
                <tr>
                    <td>
                        <input type="submit" value="" name="submit_filter" class="bt_search" title="Search contact"/><!-- the search submit button, when having mouse on it, it shows the text 'Search contact' -->
                    </td>
                </tr>
            </table>
            <div id="del_list"><!-- refresh the contact list, back to full list -->
                <a href="<?php echo url_for('sales_index_contacts') ?>">
                    <img src="<?php echo image_path('Buttons/bt_cancel_small.png') ?>" onmouseover="this.src='<?php echo image_path('Buttons/bt_cancel_small_hov.png') ?>';" onmouseout="this.src='<?php echo image_path('Buttons/bt_cancel_small.png') ?>';" width="55px" title="Back to complete contact list"/><!-- when having mouse on it, it shows the text 'Back to complete contact list' -->
                </a>
            </div>
            <span id="tooltip1"><a href=""><img src="<?php echo image_path('Buttons/bt_help.png') ?>" /><span>Fill in one or more field(s) to search a contact</span></a></span>
        </fieldset>
    <!--</form>-->     
    </div><!-- close search -->
</div><!-- close par header -->
<h2>Contacts</h2>
<div id="contacts" class="table_div"><!-- table with all contacts -->
    <table>
        <tr class="bold head">
<!--            <td>Contact No.</td>-->
            <td>Contact Code</td>
            <td>Name</td>
            <td>Category</td>
            <td>City</td>
            <td>Phone</td>
            <td width="35px"></td>
        </tr>
        <!-- You can click on a table row to see all the information of that contact -->
        <?php foreach ($contacts as $i => $contact): ?>
            <tr class="table_hov <?php echo fmod($i, 2) ? 'even' : 'odd' ?>">
                <td><a href="<?php echo url_for('sales_show_contact', $contact) ?>"><?php echo $contact->getContactCode() ?></a></td>
                <td><a href="<?php echo url_for('sales_show_contact', $contact) ?>"><?php echo $contact->getName() ?></a></td>
                <td><a href="<?php echo url_for('sales_show_contact', $contact) ?>"><?php echo $contact->getCategoryName() ?></a></td>
                <td><a href="<?php echo url_for('sales_show_contact', $contact) ?>"><?php echo $contact->getCity() ?></a></td>
                <td><a href="<?php echo url_for('sales_show_contact', $contact) ?>"><?php echo $contact->getPhone() ?></a></td>
                <td><a href="<?php echo url_for('sales/editContact?id='.$contact->getId()) ?>"><img src="<?php echo image_path('Buttons/bt_edit_small.png') ?>" onmouseover="this.src='<?php echo image_path('Buttons/bt_edit_small_hov.png') ?>';"  onmouseout="this.src='<?php echo image_path('Buttons/bt_edit_small.png') ?>';" title="Edit contact"/></a></td><!-- edit button -->
            </tr>
        <?php endforeach ?>
    </table>
</div>